<template>
	<div>
		<div class="topNav">
			<div>
				<el-input placeholder="请输入内容" v-model="search">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">新建排号</el-button>
			<el-button type="danger">删除排号</el-button>
		</div>

		<div v-for="n in 3" :key="n">
			<el-col :span="4">
				<el-card shadow="always">
					<div class="num">
						3人
						<div>15:00</div>
					</div>

					<div class="taberNum">
						201号
					</div>
				</el-card>
			</el-col>
		</div>

		<el-dialog title="| 新建排号" :visible.sync="dialogVisible" width="50%">
            <div class="our-info">
                <div>客人人数</div>
                <input type="text">
            </div>
            <div class="our-info">
                <div>排号号码</div>
                <input type="text">
            </div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			dialogVisible: false,
            search:"",

		};
	},

     methods: {
     
    }
};
</script>

<style lang="scss" scoped>
.topNav {
	display: flex;
	margin-bottom: 20px;
	div {
		margin-right: 20px;
	}
}

.el-card {
	margin-right: 20px;
}

.num {
	height: 100px;
	text-align: center;
	font-size: 28px;
	color: rgb(66, 148, 255);
	div {
		font-size: 16px;
		color: red;
	}
}

.taberNum {
	color: rgba(0, 0, 0, 0.562);
	text-align: center;
}

.our-info{
    display: flex;
    margin-bottom: 20px;
    div{
        height: 30px;
        line-height: 30px;
    }
    input{
        margin-left: 10px;
        height: 30px;
        line-height: 30px;
    }
}

.el-dialog__header{
    color: rgb(50, 68, 119) !important
}
</style>
